<script setup lang="ts">
import type { NavigateItemType } from '../constants/navigate-item'

withDefaults(
  defineProps<{
    navigateItem: NavigateItemType
  }>(),
  {},
)
</script>

<template>
  <!-- 顶部操作栏 包含 搜索栏以及导航项 -->
  <view class="top-actions">
    <hope-navigate-item :navigate-item="navigateItem" :horizontal="true" icon-size="sm" />
    <hope-search-bar class="top-actions-search-bar" />
  </view>
</template>

<style scoped lang="scss">
.top-actions {
  display: flex;
  padding-inline: 30rpx;

  &-search-bar {
    display: flex;
    flex: 1;
    align-items: center;
    margin-left: 50rpx;
  }
}
</style>
